<template>
	<!-- Home的整体页面布局 -->
	<el-container style="height: 100%;">
		<!-- 头部信息 -->
		<el-header style="background-color: #B4BCCC;">
			<span style="font-size: 25px; color: #000000;float:left;">众筹平台（管理员界面）</span>
			<el-dropdown style="float:right; margin-top: 10px;">
				<el-avatar style="background-color: #5DAF34;" icon="el-icon-user-solid"></el-avatar>
				<el-dropdown-menu style="width: 120px; text-align: center;">
					<el-link @click="toIndex" target="_blank">众筹网首页</el-link>
					<el-link @click="logout" target="_blank">退出系统</el-link>
				</el-dropdown-menu>
			</el-dropdown>
		</el-header>

		<el-container>
			<!-- 左侧菜单 -->
			<el-aside width="200px" style="background-color: #666666;">
				<!-- 具体菜单 -->
				<el-menu class="el-menu-vertical-demo" background-color="#666666" text-color="#fff"
					active-text-color="#ffd04b" unique-opened style="border-right: none;" router>
					<!-- 动态菜单 -->
					<el-submenu v-for="(one,index) in menums" :index="one.powerid+''">
						<template slot="title">
							<i :class="one.icon"></i>
							<span>{{one.powername}}</span>
						</template>
						<!-- 二级菜单 -->
						<el-menu-item v-for="(two,ind) in one.children" :index="two.path">
							<template slot="title">
								<i :class="two.icon"></i>
								<span>{{two.powername}}</span>
							</template>
						</el-menu-item>
					</el-submenu>

				</el-menu>

			</el-aside>

			<!-- 中间内容区域 -->
			<el-main id="Home-main" :style="bj">
				<!-- 路由占位符 -->
				<router-view></router-view>
			</el-main>
		</el-container>

		<!--底部版权所属区域-->
		<el-footer>
			<span>该项目版权所属慧点科技有限公司</span>
		</el-footer>
	</el-container>

</template>

<script>
	export default {
		data() {
			return {
				menums: [],
				bj: {
					backgroundImage: "url(" + require("../img/精灵1.jpg") + ")",
					backgroundRepeat: "no-repeat",
					backgroundSize: "100%",
					padding: "30px,0px"
				},
			}
		},
		async mounted() {
			var id = window.sessionStorage.getItem("userid");
			var res = await this.$http.get("selectPowersByUid?id=" + id)
			this.menums = res.data.data;
		},
		methods: {
			// 退出登录
			logout() {
				// 清空sessiontStorage中的数据
				window.sessionStorage.clear();
				// 跳转到登录页面
				this.$router.push("/login")
			},
			toIndex() {
				this.$router.push("/index")
			}
		}
	}
</script>

<style scoped>
	.el-header {
		background-color: #3C8DBC;
		line-height: 60px;

	}

	.head-title {
		display: inline-block;
		float: left;
		line-height: 40px;
	}

	.head-button {
		display: inline-block;
		float: right;
		margin-top: 6px;
	}

	.el-aside {
		background-color: #222D32;
	}

	#Home-main {
		background-color: #ECF0F5;
		height: 100%;
	}

	.el-footer {
		/* 为底部区域设置高度为30px    !important代表是当前的样式优先级最高 */
		height: 30px !important;
		background-color: #FFFFFF;
		text-align: center;
		color: gray;
		margin-top: 10px;
	}
</style>
